<template>
  <div v-loading="loading1 || loading2" class="DescriptionSettings">
    <div class="title">
      <h3>说明设置</h3>
    </div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">租赁商品</el-menu-item>
      <el-menu-item index="2">售卖商品</el-menu-item>
    </el-menu>
    <el-form
      v-if="rentFormData"
      v-show="activeIndex === '1'"
      ref="rentForm"
      :rules="{
        content : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
        leaseTimeContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
        distributionModeContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
        freightContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
        problemContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
      }"
      :model="rentFormData"
      label-width="120px"
      label-position="top"
      class="form"
    >

      <el-form-item label="租赁须知" prop="content">
        <WangEditor ref="rentEditor0" v-model="rentFormData.content" />
      </el-form-item>

      <el-form-item label="租期说明" prop="leaseTimeContentShort">
        <el-input
          v-model="rentFormData.leaseTimeContentShort"
          placeholder="请输入租期说明简短描述"
          clearable
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        prop="leaseTimeContent"
      >
        <WangEditor ref="rentEditor1" v-model="rentFormData.leaseTimeContent" />
      </el-form-item>

      <!--      <el-form-item label="送货方式" prop="distributionModeContentShort">-->
      <!--        <el-input-->
      <!--          v-model="rentFormData.distributionModeContentShort"-->
      <!--          placeholder="请输入送货方式简短描述"-->
      <!--          clearable-->
      <!--          maxlength="30"-->
      <!--          show-word-limit-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="送货方式" prop="distributionModeContent">
        <WangEditor ref="rentEditor2" v-model="rentFormData.distributionModeContent" />
      </el-form-item>

      <el-form-item label="运费说明" prop="freightContentShort">
        <el-input
          v-model="rentFormData.freightContentShort"
          placeholder="请输入运费说明简短描述"
          clearable
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item prop="freightContent">
        <WangEditor ref="rentEditor3" v-model="rentFormData.freightContent" />
      </el-form-item>

      <el-form-item label="常见问题" prop="problemContent">
        <WangEditor ref="rentEditor4" v-model="rentFormData.problemContent" />
      </el-form-item>

      <el-form-item label="下单说明">
        <OrderReadme v-model="rentFormData.orderReadme" />
      </el-form-item>
    </el-form>
    <el-form
      v-if="saleFormData"
      v-show="activeIndex === '2'"
      ref="saleForm"
      :rules="{
        content : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
        distributionModeContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
        freightContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
        problemContent : [
          { max: 5000, message: '内容长度超过5000个字符', trigger: 'blur' }
        ],
      }"
      :model="saleFormData"
      label-width="120px"
      label-position="top"
      class="form"
    >

      <el-form-item label="购买说明" prop="content">
        <WangEditor ref="saleEditor0" v-model="saleFormData.content" />
      </el-form-item>

      <!--      <el-form-item label="送货方式" prop="distributionModeContentShort">-->
      <!--        <el-input-->
      <!--          v-model="saleFormData.distributionModeContentShort"-->
      <!--          placeholder="请输入送货方式简短描述"-->
      <!--          clearable-->
      <!--          maxlength="30"-->
      <!--          show-word-limit-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="送货方式" prop="distributionModeContent">
        <WangEditor ref="saleEditor1" v-model="saleFormData.distributionModeContent" />
      </el-form-item>

      <el-form-item label="运费说明" prop="freightContentShort">
        <el-input
          v-model="saleFormData.freightContentShort"
          placeholder="请输入运费说明简短描述"
          clearable
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      <el-form-item prop="freightContent">
        <WangEditor ref="saleEditor2" v-model="saleFormData.freightContent" />
      </el-form-item>

      <el-form-item label="常见问题" prop="problemContent">
        <WangEditor ref="saleEditor3" v-model="saleFormData.problemContent" />
      </el-form-item>

      <el-form-item label="下单说明">
        <OrderReadme v-model="saleFormData.orderReadme" />
      </el-form-item>
    </el-form>
    <div v-if="activeIndex === '1'" class="footer">
      <el-button type="primary" @click="onSubmitRent">保存</el-button>
      <el-button @click="resetRentForm">重置</el-button>
    </div>
    <div v-if="activeIndex === '2'" class="footer">
      <el-button v-if="activeIndex === '2'" type="primary" @click="onSubmitSale">保存</el-button>
      <el-button @click="resetSaleForm">重置</el-button>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import { getRentDescription, setRentDescription } from '@/api/commodity'
import WangEditor from '../../components/WangEditor/index'
import OrderReadme from '../../components/OrderReadme/index'

/** 说明设置 */
export default {
  name: 'DescriptionSettings',
  components: { OrderReadme, WangEditor },
  data() {
    return {
      activeIndex: '1',
      loading1: false,
      loading2: false,
      rentFormData: null,
      saleFormData: null
    }
  },
  created() {
    this.loadRentSetting()
    this.loadSaleSetting()
  },
  methods: {
    loadRentSetting() {
      const vm = this
      vm.loading1 = true
      vm.rentFormData = null
      getRentDescription({ type: 0 }).then(res => {
        const formData = {
          type: 0,
          content: res.data.data.content ? res.data.data.content : '', // 租赁须知
          distributionModeContent: res.data.data.distributionModeContent ? res.data.data.distributionModeContent : '', // 送货方式
          distributionModeContentShort: res.data.data.distributionModeContentShort ? res.data.data.distributionModeContentShort : '', // 送货方式（简短）
          freightContent: res.data.data.freightContent ? res.data.data.freightContent : '', // 运费说明
          freightContentShort: res.data.data.freightContentShort ? res.data.data.freightContentShort : '', // 运费说明（简短）
          leaseTimeContent: res.data.data.leaseTimeContent ? res.data.data.leaseTimeContent : '', // 租期说明
          leaseTimeContentShort: res.data.data.leaseTimeContentShort ? res.data.data.leaseTimeContentShort : '', // 租期说明（简短）
          problemContent: res.data.data.problemContent ? res.data.data.problemContent : '', // 常见问题
          placeOrderContent: res.data.data.placeOrderContent ? JSON.parse(res.data.data.placeOrderContent) : [], // 下单说明
          orderReadme: res.data.data.placeOrderContent ? JSON.parse(res.data.data.placeOrderContent) : [] // 下单说明
        }
        vm.rentFormData = formData
        vm.loading1 = false
      }).catch((res) => {
        vm.loading1 = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    loadSaleSetting() {
      const vm = this
      vm.loading2 = true
      vm.saleFormData = null
      getRentDescription({ type: 1 }).then(res => {
        const formData = {
          type: 1,
          content: res.data.data.content ? res.data.data.content : '', // 购买说明
          distributionModeContent: res.data.data.distributionModeContent ? res.data.data.distributionModeContent : '', // 送货方式
          distributionModeContentShort: res.data.data.distributionModeContentShort ? res.data.data.distributionModeContentShort : '', // 送货方式（简短）
          freightContent: res.data.data.freightContent ? res.data.data.freightContent : '', // 运费说明
          freightContentShort: res.data.data.freightContentShort ? res.data.data.freightContentShort : '', // 运费说明（简短）
          problemContent: res.data.data.problemContent ? res.data.data.problemContent : '', // 常见问题
          placeOrderContent: res.data.data.placeOrderContent ? JSON.parse(res.data.data.placeOrderContent) : [], // 下单说明
          orderReadme: res.data.data.placeOrderContent ? JSON.parse(res.data.data.placeOrderContent) : [] // 下单说明
        }
        console.log(formData)
        vm.saleFormData = formData
        vm.loading2 = false
      }).catch((res) => {
        vm.loading2 = false
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    },
    // 菜单事件
    handleSelect(index) {
      this.activeIndex = index
    },
    // 提交
    onSubmitRent() {
      const vm = this

      vm.$refs.rentForm.validate((valid) => {
        if (valid) {
          this.$confirm('确定保存设置吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loadingInstance = Loading.service({ fullscreen: true })
            const data = vm.$XEUtils.clone(vm.rentFormData, true)
            data.placeOrderContent = data.orderReadme
            delete data.orderReadme
            setRentDescription(data).then(res => {
              loadingInstance.close()
              vm.$message.success('保存成功')
              vm.loadRentSetting()
            }).catch(res => {
              loadingInstance.close()
              if (res && res.data && res.data.errno !== 0) {
                vm.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
              }
            })
          })
        }
      })
    },
    onSubmitSale() {
      const vm = this

      vm.$refs.saleForm.validate((valid) => {
        if (valid) {
          this.$confirm('确定保存设置吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loadingInstance = Loading.service({ fullscreen: true })
            const data = vm.$XEUtils.clone(vm.saleFormData, true)
            data.placeOrderContent = data.orderReadme
            delete data.orderReadme
            setRentDescription(data).then(res => {
              loadingInstance.close()
              vm.$message.success('保存成功')
              vm.loadSaleSetting()
            }).catch(res => {
              loadingInstance.close()
              if (res && res.data && res.data.errno !== 0) {
                vm.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
              }
            })
          })
        }
      })
    },
    resetRentForm() {
      const vm = this
      vm.$refs.rentForm.resetFields()
      for (let i = 0; i < 5; i++) {
        vm.$refs['rentEditor' + i].reset()
      }
      vm.rentFormData.orderReadme = vm.$XEUtils.clone(vm.rentFormData.placeOrderContent, true)
      vm.$forceUpdate()
    },
    resetSaleForm() {
      const vm = this
      vm.$refs.saleForm.resetFields()
      for (let i = 0; i < 4; i++) {
        vm.$refs['saleEditor' + i].reset()
      }
      vm.saleFormData.orderReadme = vm.$XEUtils.clone(vm.saleFormData.placeOrderContent, true)
      vm.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.DescriptionSettings {
  padding: 30px;
  ::v-deep .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .form {
    margin-top: 30px;
  }
  .footer {
    text-align: center;
    margin-top: 30px;
  }
}
</style>
